  <template>
  <div class="ele-body aging">
    <el-card shadow="never" class="topCard">
      <div >工单完成时效统计</div>
      <div >可统计不同团队和不同工单类型的工单，其完成所消耗的时间分布。</div>
    </el-card>
    <el-card shadow="never">
      <CustomSelect label="工单类型：" @input="query" v-model="queryForm.orderworkType" :selectOptions="options1"/>
    </el-card>
    <el-card shadow="never">
      <!-- 搜索表单 -->
      <el-form ref="queryFormRef" :model="queryForm" class="ele-form-search" label-width="auto"
               @keyup.enter.native="query"
               @submit.native.prevent>
        <el-row :gutter="15" type="flex" style="flex-wrap: wrap">

          <el-col :xl="6" :lg="8" :md="12">
            <el-form-item label="选择人员：">
              <PersonnelSelect v-model="queryForm.user_id"></PersonnelSelect>
            </el-form-item>
          </el-col>
          <el-col :xl="6" :lg="8" :md="12">
            <el-form-item label="部门：">
              <el-select v-model="queryForm.dept_id" placeholder="请选择部门" style="width: 100%">
                <el-option
                  v-for="item in options2"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xl="6" :lg="8" :md="12">
            <el-form-item label="选择时间：">
              <CustomDate v-model="queryForm.date"/>
            </el-form-item>
          </el-col>
          <el-col :xl="6" :lg="8" :md="12">
            <div class="ele-form-actions">
              <el-button :loading="loading" class="ele-btn-icon" icon="el-icon-search" type="primary" @click="query">
                查询
              </el-button>
              <el-button @click="reset">重置</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card class="ele-body" shadow="never" v-loading="loading">
      <div class="content">
        <Echarts2 :data="echartsData"/>
      </div>
    </el-card>
  </div>
</template>
<script>
import CustomDate from "./components/CustomDate.vue"
import Echarts2 from "./components/Echarts2.vue"
import PersonnelSelect from "@/views/reports/examine/average_service_time/components/PersonnelSelect.vue";
import CustomSelect from "@/views/reports/workorder-monitoring/components/CustomSelect.vue";

export default {
  components: {CustomDate, Echarts2, CustomSelect, PersonnelSelect},
  data() {
    return {
      loading: false,
      queryForm: {
        dept_id: null,
        date: null,
        type: null,
        orderworkType: null,
      },
      echartsData: {},
      options1: [],
      options2: [],
      options3: [{
        value: '选项1',
        label: '研发部门'
      }, {
        value: '选项2',
        label: '维修部门'
      }, {
        value: '选项3',
        label: '生产部门'
      }],
    }
  },
  mounted() {
    this.handleQueryParams()
    this.handleQueryData()
  },
  methods: {
    query() {
      console.log(this.queryForm)
      let form = {...this.queryForm}
      delete form.date
      if (this.queryForm.date?.length) {
        form.month_start = this.queryForm.date[0]
        form.month_end = this.queryForm.date[1]
      }
      this.handleQueryData(form)
    },
    reset() {
      this.queryForm = {}
      this.query()
    },
    handleQueryData(params) {
      this.loading = true
      this.$http.get('/reports/work_order_aging', {params}).then(({data}) => {
        console.log(data)
        data.success ? this.echartsData = data.data : this.$message.error(data.msg)
        console.log(this.echartsData)
        this.loading = false
      })
    },
    handleQueryParams() {
      this.$http.get('wos/params').then(res => {
        res.data.code === 0 ? this.options1 = res.data.data.wo_types.map(item => ({
          value: item,
          label: item
        })) : this.$message.error(res.data.msg);
      })
      this.$http.get('dept/index').then(res => {
        res.data.code === 0 ? this.options2 = res.data.data : this.$message.error(res.data.msg);
      })
    },
  },
}
</script>

<style scoped lang="scss">
.aging {
  div:nth-child(2) {
    ::v-deep.el-card__body {
      padding-bottom: 0;
    }
  }
}
.topCard{
  ::v-deep div:not(:first-child){
    margin-top: 10px;
  }
  div:first-child{
    font-size: 16px;
    font-weight: 700;
    color: #262626
  }
}
</style>
